<template>
  <div>
    <div class="header">
      <span>{{ title }}</span>
      <svg t="1648204345717" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4188" width="20" height="20"><path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM448 448v384h128V448H448z m0-256v128h128V192H448z" fill="#8a8a8a" p-id="4189" /></svg>
    </div>
    <div class="center">
      <span>{{ num }}</span>
      <span>{{ index }}</span>
      <svg t="1648202789158" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3213" width="20" height="20"><path d="M384 512H128V384l384-384 384 384v128h-256v512H384V512z" fill="#1afa29" p-id="3214" /></svg>&nbsp;&nbsp;
      <svg t="1648202767672" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2903" width="16" height="16"><path d="M640 512h256v128l-384 384-384-384V512h256V0h256v512z" fill="#d81e06" p-id="2904" /></svg>
    </div>
    <div class="charts">
      <LineCharts />
    </div>
  </div>
</template>

<script>
import LineCharts from '../LineCharts/index.vue'
export default {
  name: 'Contain',
  components: {
    LineCharts
  },
  props: {
    title: {
      required: true,
      type: String
    },
    num: {
      required: true,
      type: String
    },
    index: {
      required: true,
      type: String
    }
  }
}
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
}
.header span {
 margin-right: 20px;
}
.center {
  margin: 10px 0 0 0;
}
.center span:nth-child(1) {
  font-size: 25px;
}
.center span {
 margin-right: 20px;
}
.charts {
  width:100%;
  height: 60px;
}
</style>
